<template>
	<div class="flex-center text-18px cursor-pointer" @click="handleSwitch">
		<icon-mdi-moon-waning-crescent v-if="darkMode" />
		<icon-mdi-white-balance-sunny v-else />
	</div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

defineOptions({ name: 'DarkModeSwitch' });

interface Props {
	/** 暗黑模式 */
	dark?: boolean;
	/** 自定义暗黑模式动画过渡 */
	customizeTransition?: boolean;
}

const props = withDefaults(defineProps<Props>(), {
	dark: false
});

interface Emits {
	(e: 'update:dark', darkMode: boolean): void;
}

const emit = defineEmits<Emits>();

const darkMode = computed({
	get() {
		return props.dark;
	},
	set(newValue: boolean) {
		emit('update:dark', newValue);
	}
});

async function handleSwitch(event: MouseEvent) {
	const x = event.clientX;
	const y = event.clientY;

	if (!props.customizeTransition || !document.startViewTransition) {
		darkMode.value = !darkMode.value;
		return;
	}

	const endRadius = Math.hypot(Math.max(x, innerWidth - x), Math.max(y, innerHeight - y));

	const transition = document.startViewTransition(() => {
		darkMode.value = !darkMode.value;
	});

	await transition.ready;

	const clipPath = [`circle(0px at ${x}px ${y}px)`, `circle(${endRadius}px at ${x}px ${y}px)`];

	document.documentElement.animate(
		{
			clipPath: darkMode.value ? clipPath : [...clipPath].reverse()
		},
		{
			duration: 300,
			easing: 'ease-in',
			pseudoElement: darkMode.value ? '::view-transition-new(root)' : '::view-transition-old(root)'
		}
	);
}
</script>

<style>
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}

::view-transition-old(root) {
	z-index: 9999;
}

::view-transition-new(root) {
	z-index: 1;
}

.dark::view-transition-old(root) {
	z-index: 1;
}

.dark::view-transition-new(root) {
	z-index: 9999;
}
</style>
